<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="description" content="html5">
	<meta name="keywords" content="">
	<meta name="author" content="gmk">
	
	<!--屏蔽苹果对电话号码的识别-->
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<title>html5</title>
	<!--[if lt IE 9]>
	<script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		li{list-style: none;}
		html,body{width: 100%;height: 100%;}
		.music{background:url(../img/0.jpg) no-repeat center;width:100%;
		height:100%;position:relative;background-size: cover}
		.control{width:100%;height:20%;display:flex;justify-content:space-around;
		align-items:center;position: absolute;bottom: 0;left: 0;}
		.progress{position:absolute;bottom:22%;left:10%;width: 80%;
		height:5px;background-color: #ccc;overflow: hidden;}
		.progress2{width:0;height:100%;background-color: sandybrown;}
		.music>img{width:300px;height: 500px;}
		.reload img{width: 20px;}
		.pre img{width: 30px;}
		.pause img{width: 50px;}
		.next img{width: 30px;}
		.list img{width: 20px;}
		.lists{position: absolute;bottom:20%;right:0;display: none;}
		.lists li{height:20px;color: green;}
	</style>
</head>

<body>
	<div class="music">
		<audio src="../img/a.mp3" autoplay="autoplay" id="audio1"></audio>
		<div class="control">
		<a href="javascript:;" class="reload"><img src="../img/reload.png"/></a>
		<a href="javascript:;" class="pre"><img src="../img/pre.png"/></a>
		<a href="javascript:;" class="pause"><img src="../img/pause.png"/></a>
		<a href="javascript:;" class="next"><img src="../img/next.png"/></a>
		<a href="javascript:;" class="list"><img src="../img/list.png"/></a>
		</div>
		<div class="progress">
			<div class="progress2"></div>
		</div>
		<ul class="lists">
		</ul>
	</div>
</body>
<script>
window.onload=function(){
	var audio=document.getElementById("audio1");
	var arr=[{id:0,src:"../img/a.mp3",pic:"url(../img/0.jpg)"},
	{id:1,src:"../img/b.mp3",pic:"url(../img/1.jpg)"},
	{id:2,src:"../img/c.mp3",pic:"url(../img/2.jpg)"}];
	var k=0,bar=0,winWidth=$(window).width();
	var time=audio.duration;
	var timer=setInterval(f1,1000);
	function f1(){
		bar+=winWidth/time;
		console.log(bar);
		//console.log(winWidth);
		if(bar>=winWidth){
			clearInterval(timer);
		}
		$(".progress2").css("width",bar+"px");
	}
	
	console.log(audio.src);
	console.log(audio.currentSrc);
	$(".reload").click(function(){
		bar=0;
		audio.load();
	})
	
	$(".pre").click(function(){
		k--;
		if(k<0){
			k=arr.length-1;
		}
		$(".music").css("backgroundImage",arr[k].pic);
		$("audio").attr("src",arr[k].src);
		clearInterval(timer);
		var time=audio.duration,bar=0;
		console.log(time);
		var timer=setInterval(f1,100);
	})
	
	$(".pause").click(function () {
		if(audio.paused){
			audio.play();
			var timer=setInterval(f1,1000);
	   		$(this).find("img").attr("src","../img/pause.png");
		}else{
			audio.pause();
			clearInterval(timer);
	   		$(this).find("img").attr("src","../img/play.png");
		}
	})

	$(".next").click(function(){
		k++;
		if(k>=arr.length){
			k=0;
		}
		$(".music").css("backgroundImage",arr[k].pic);
		$("audio").attr("src",arr[k].src);
		clearInterval(timer);
		var time=audio.duration,bar=0;
		var timer=setInterval(f1,100);
	})
	
	
	
	$(".list").click(function(){
		$(".lists").toggle();
	})
}


</script>
</html>

